<template>
  <div class="app-container">
    <el-table v-loading="listLoading"
              :data="list"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row>
      <el-table-column align="center"
                       label="ID"
                       width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Title"
                       width="110">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="Author"
                       width="110"
                       align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.pageviews }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col"
                       label="Status"
                       width="110"
                       align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status |statusTagFilter">{{ scope.row.status | statusFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="created_at"
                       label="Display_time"
                       width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import listData from './list.json'
export default {
  filters: {
    statusTagFilter (status) {
      const statusMap = {
        '0': 'success',
        '1': 'gray',
        '2': 'danger'
      }
      return statusMap[status]
    },
    statusFilter (status) {
      const statusMap = {
        '0': '连载',
        '1': '完结',
        '2': '断刊'
      }
      return statusMap[status]
    },
  },
  data () {
    return {
      list: null,
      listLoading: true
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.listLoading = true
      setTimeout(() => {
        this.list = listData
        this.listLoading = false
      }, 1000)
    }
  }
}
</script>
